<template>
    <div class="myInfo">
        <div class="myForm">
            <a-upload
                name="icon"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                action="api/v1/icons"
                :before-upload="beforeUpload"
                @change="handleChange"
            >
                <img v-if="imageUrl" :src="imageUrl" alt="icon" />
                <div v-else>
                <a-icon :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">
                    上传个人头像
                </div>
                </div>
            </a-upload>
            <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
                <a-form-item label='用户名' >
                    <a-input
                    v-decorator="['name', { rules: [{ required: true, message: '请输入用户名!' }] }]"
                    placeholder="用户名"
                    />
                </a-form-item>
                <a-form-item label='手机号' >
                    <a-input
                    v-decorator="['phone', { rules: [{ required: true, message: '请输入手机号!' }] }]"
                    placeholder="手机号"
                    />
                </a-form-item>
                <a-form-item label='来自' >
                    <a-input
                    v-decorator="['from', { rules: [{ required: true, message: '请输入信息!' }] }]"
                    placeholder="来自"
                    ></a-input>
                </a-form-item>
                <a-form-item name="sex" label="性别">
                    <a-radio-group v-model="sex">
                    <a-radio value="1">男</a-radio>
                    <a-radio value="2">女</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item v-if="this.$store.state.myInfo.role !== 'stu'" label='职位' >
                    <a-input
                        v-decorator="['position', { rules: [{ required: true, message: '请输入职位!' }] }]"
                        placeholder="职位"
                    ></a-input>
                </a-form-item>
                <a-button style="margin: 30px 0px 0px 250px; width: 200px" type="primary" html-type="submit" >
                    修改
                </a-button>
            </a-form>
        </div>
    </div>
</template>
<script>
import './styles.less'
import userAPI from '../../services/user'
import { requestWrapper } from '../../utils/request'
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
    data() {
        return {
            formLayout: 'inline',
            form: this.$form.createForm(this, { name: 'coordinated' }),
            loading: false,
            imageUrl: this.$store.state.myInfo.headImg,
            sex: this.$store.state.myInfo.sex === "man" ? '1' : '2',
        }
    },
    methods: {
        handleSubmit(e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                if (!err) {
                    values.sex = this.sex
                    values.headImg = this.imageUrl || "api/v1/icons?path=icons/de/50/de50d524261b5079146bd43d2d382a87.jpg"
                    console.log(values);
                    requestWrapper( userAPI.updateUser.bind(null, values), {
                        autoSuccess: true,
                        successMessage: '修改成功！',
                        formatDataFn: res => res,
                    }).then((res) => {
                        localStorage.setItem('myInfo', JSON.stringify(res.result));
                        this.$store.commit('updateMyInfo');
                    })
                }
            });
        },
        handleChange(info) {
            if (info.file.status === 'uploading') {
                this.loading = true;
                return;
            }
            if (info.file.status === 'done') {
                // Get this url from response in real world.
                getBase64(info.file.originFileObj, imageUrl => {
                this.imageUrl = info.file.response.result.urlPath;
                this.loading = false;
                });
            }
        },

        beforeUpload(file) {
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
            if (!isJpgOrPng) {
                this.$message.error('You can only upload JPG file!');
            }
        const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('Image must smaller than 2MB!');
            }
            return isJpgOrPng && isLt2M;
        },
    },
    mounted(){
        this.form.setFieldsValue(this.$store.state.myInfo)
    },
}
</script>
